<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>公开项目主页</title>
    
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/projectmain.css">
</head>
<body>
    <div class="main">
        <div class="head">
            <a href="http://www.wyzyz.org" class="logo">
                <img src="http://www.cflac.org.cn/zhiyuanzhe/image/logo.png" alt="">
            </a>
            <div class="topSearch">
                <form action="http://www.cflac.org.cn/was5/web/search" method="POST" accept-charset="UTF-8">
                    <input type="text" value="站内搜索..." class="input1">
                    <input type="image" class="btn1" src="http://www.wyzyz.org/images/topBtn.gif">
                </form>
            </div>
        </div>
        
        <div class="nav">
            <ul>
               <li><a href="http://www.wyzyz.org" class="aNow" style="width:37px;">首 页</a></li>
               <li><a href="#" class="aNow">要闻资讯</a></li>
               <li><a href="#" class="aNow">精彩视频</a></li>
               <li><a href="#" class="aNow">品牌活动</a></li>
               <li><a href="#" class="aNow">各地联动</a></li>
               <li><a href="#" class="aNow">志愿者协会</a></li>
               <li><a href="#" class="aNow">名家公益</a></li>
               <li><a href="#" class="aNow">志愿之星</a></li>
               <li><a href="#" class="aNow">互动交流</a></li>
               <li><a href="#" class="aNow">资料下载</a></li>
            </ul>
        </div>
        <div class="carousel" id="carouselUl">
            <carousel-item :data="items"></carousel-item>
        </div>

        <!--main-content-->
        <div class="content">
            <div class="content-left">
                <div class="select">
                    <form action="">
                        <ul>
                            <li>
                                <span class="select-content">项目区域</span>
                                <span>全国</span>
                                <a href="#">河北</a>
                                <a href="#">山东</a>
                                <a href="#">辽宁</a>
                                <a href="#">黑龙江</a>
                                <a href="#">吉林</a>
                                <a href="#">甘肃</a>
                                <a href="#">青海</a>
                                <a href="#">河南</a>
                                <a href="#">江苏</a>
                                <a href="#">湖北</a>
                                <a href="#">湖南</a>
                                <a href="#">江西</a>
                                <a href="#">浙江</a>
                                <a href="#">广东</a>
                                <a href="#">云南</a>
                                <a href="#">福建</a>
                                <a href="#">海南</a>
                                <a href="#">山西</a>
                                <a href="#">四川</a>
                                <a href="#">陕西</a>
                                <a href="#">贵州</a>
                                <a href="#">安徽</a>
                                <a href="#">广西</a>
                                <a href="#">内蒙古</a>
                                <a href="#">西藏</a>
                                <a href="#">新疆</a>
                                <a href="#">宁夏</a>
                                <a href="#">北京</a>
                                <a href="#">天津</a>
                                <a href="#">上海</a>
                                <a href="#">重庆</a>
                            </li>
                            <li>
                                <span class="select-content">项目状态</span>
                                <span>全部</span>
                                <a href="#">招募待启动</a>
                                <a href="#">招募中</a>
                                <a href="#">招募已结束</a>
                                <a href="#">已结项</a>
                            </li>
                            <li>
                                <span class="select-content">报名范围</span>
                                <span>全部</span>
                                <a href="#">个人</a>
                                <a href="#">团体</a>
                            </li>
                            <!--<li>
                                <span class="select-content">服务对象</span>
                                <span>全部</span>
                                <a href="#">儿童</a>
                                <a href="#">青少年</a>
                                <a href="#">孤寡老人</a>
                                <a href="#">残障人士</a>
                                <a href="#">优抚对象</a>
                                <a href="#">特困群体</a>
                                <a href="#">其他</a>
                            </li>
                             <li>
                                <span class="select-content">项目人数</span>
                                <span>全部</span>
                                <a href="#">0</a>
                                <a href="#">1-100</a>
                                <a href="#">101-200</a>
                                <a href="#">201-500</a>
                                <a href="#">201-1000</a>
                                <a href="#">1000以上</a>
                            </li>-->
                        </ul>
                    </form>
                </div>

                <div class="search">
                    <div class="info-l">
                         &nbsp项目起止日期&nbsp
                        <input type="text" class="search-input">
                        &nbsp至&nbsp
                        <input type="text" class="search-input">
                        &nbsp项目ID&nbsp
                        <input type="text" class="search-input">
                        &nbsp项目名称&nbsp
                        <input type="text" class="search-input-name">   
                        <button class="search-btn">搜索</button>                     
                    </div>
                    <div class="info-r"></div>
                </div>


                <div class="select-list">
                    <ul id="project">
                        <li class="select-list-detail">
                            <div class="list-example" style="height: 100%;">
                                <a href="..." target="_blank" style="display: inline-block;width: 100%; height: 100%; background: none; position: relative;">
                                    <img src="./icon/add.png" alt="..." style="width:60px; height:60px; position: absolute; top: 120px; left: 90px;">
                                    <h3 style="position: absolute; top: 175px;left: 80px; color: #bdbdbd">点击发起项目</h3>
                                </a>
                            </div>
                        </li>
                        <li class="select-list-detail" v-for="item in items">
                            <div class="list-example">
                                <a v-bind:href="item.projectLink" target="_blank" style="display: inline-block;width: 100%; height: 100%; background: none;">
                                    <img v-bind:src="item.projectImg" alt="" style="width:100%; height:100%;">
                                </a>
                            </div>
                            <div class="list-examplep">
                                <p class="list-examplep-title"><a :href="item.projectLink">{{item.projectName}}</a></p>
                                <p class="list-examplep-info">
                                    <span class="info-l">团体人数：{{item.projectTeamNum}}</span>
                                    <span class="info-r">服务时长：{{item.projectLength}}</span>
                                </p>
                            </div>
                            <p class="list-examplep-comment">
                                <span class="info-l">
                                    培训满意度<br>{{item.trainScore}}
                                </span>
                                <span class="info-l">
                                    合作满意度<br>{{item.cooScore}}
                                </span>
                                <span class="info-l">
                                    计划符合度<br>{{item.planScore}}
                                </span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="content-right" id="recommand-project">
               <div class="recommand-title">推荐项目</div> 
               <recommand-item :data="items"></recommand-item>

               <div class="recommand-title" id="recommand-team">推荐团体</div>
               <recommand-item :data="items"></recommand-item>                    
            </div>
        </div>
        <!--main-content-finish-->

    <div class="footLink">
        <h1>链接</h1>
    </div>
    <div class="pageTitle">
        <a href="#">中国文联</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国作协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国剧协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国影协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国音协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国美协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国曲协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国舞协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国民协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国摄协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国书协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国杂协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国视协</a><span style="font-size: 12px;"> | </span>
        <a href="#">中国文学艺术基金会</a><span style="font-size: 12px;"></span>
    </div>
    <div class="foot-content">
        <div class="fl">
            <img src="http://www.wyzyz.org/position/201311/W020131122395902660584.jpg" alt="" style="width: 696px;height: 140px;">
        </div>
        <div class="fr">
            <img src="http://www.wyzyz.org/position/201311/W020141017430301807582.jpg" alt="" style="width: 270px;height: 140px;">
        </div>
    </div>
    <div class="footDiv">
        <div class="div0">
            <a href="#">联系咨询</a>|
            <a href="#">投诉建议</a>|
            <a href="#">文艺论坛</a>|
            <a href="#">职能部门</a>|
            <a href="#">团体会员</a>|
            <a href="#">组织结构</a>|
        </div>
        京ICP备14001194号　京公网安备11010502025171  中国文艺志愿者网　版权所有
    </div>
    </div>
    

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <!--component template-->
    <!--<script type="text/x-template" id="project-item-template">
            <div class="list-example">
                <a v-bind:href="item.projectLink" target="_blank" style="display: inline-block;width: 100%; height: 100%; background: none;">
                    <img v-bind:src="item.projectImg" alt="" style="width:100%; height:100%;">
                </a>
            </div>
            <div class="list-examplep">
                <p class="list-examplep-title">{{item.projectName}}</p>
                <p class="list-examplep-info">
                    <span class="info-l">团体人数：{{item.projectTeamNum}}</span>
                    <span class="info-r">服务时长：{{item.projectLength}}</span>
                </p>
            </div>
            <p class="list-examplep-comment">
                <span class="info-l">
                    培训满意度<br>{{item.trainScore}}
                </span>
                <span class="info-l">
                    合作满意度<br>{{item.cooScore}}
                </span>
                <span class="info-l">
                    计划符合度<br>{{item.planScore}}
                </span>
            </p>
    </script>-->

    <!--列表组件-->
    <script type="text/x-template" id="recommand-item-template">
        <ul class="recommand-content">
            <li v-for="item in data"><a target="_blank" :href="item.recommandLink">{{item.recommandListName}}</a></li>
        </ul>
    </script>

    <!--carousel组件-->
    <script type="text/x-template" id="carousel-item-template">
    <ul class="carousel-ul">
        <li v-for="item in data">
            <div class="exampleimg">
                <a :href="item.carouselListLink" target="_blank" title="example"><img style="width:100%;height:100%;" :src="item.carouselListImg" alt=""></a>
            </div>
            <p class="examplep">
                <a :href="item.carouselListLink" target="_blank" title="example">{{item.carouselListName}}</a>
            </p>
        </li>
    </ul>
    </script>


    <script>
        // Vue.component('project-item',{
        //     template:'#project-item-template',
        //     props:['data'],

        // });


        Vue.component('recommand-item' ,{
            template:'#recommand-item-template',
            props:['data']
        });

        Vue.component('carousel-item'  ,{  /*carousel*/
            template:'#carousel-item-template',
            props:['data'],
        });

        var carouselList = new Vue({   /*carousel*/
            el:'#carouselUl',
            data:{
             items:[
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},                    
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},
                    { carouselListName:'example', carouselListLink:'http://www.baidu.com',carouselListImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg'},
                    
                ]
            }     
        })


        var projectIndex = new Vue({  /*项目列表*/
            el: '#project',
            data: {
                items: [
                { projectLink: './projectdetail.html', projectImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg',projectName:'下乡送欢乐',projectTeamNum:'10',projectLength:'10h',trainScore:'5.0',cooScore:'5.0',planScore:'5.0' },           
                { projectLink: './projectdetail.html', projectImg:'https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9687a5888913632701e0ca61f0e6cb89/8d5494eef01f3a29aaadec9a9a25bc315c607c78.jpg',projectName:'下乡送欢乐',projectTeamNum:'10',projectLength:'10h',trainScore:'5.0',cooScore:'5.0',planScore:'5.0' },           
                ]
            }
            })

        var recommandItem = new Vue({ /* 推荐项目*/
            el:'#recommand-project',
            data:{
                items:[
                    {recommandLink:'http://www.baidu.com',recommandListName:'下乡送欢乐'},
                ]
            }
        })

        var recommandTeam = new Vue({  /*推荐团队*/
            el:'#recommand-team',
            data:{
                items:[
                    {recommandLink:'http://www.baidu.com',recommandListName:'文艺小队'},
                ]
            }
        })
    </script>
</body>
</html>